<template>
  <view class="card margin-top-30" :style="{marginTop}" :class="[type]">
    <view class="padding-bottom-30" hover-class="card-hover" :hover-stay-time="70" @click="toDetail">
      <view v-if="type !== 'bill' && type !== 'pending'" class="title padding-lr-30 flex-row justify-between align-center" :style="{backgroundImage:titleInfo.background}">
        <view v-if="type==='order'" class="flex-row flex-center">
          <text class="text-28 color-t1">{{ item.ioType ? (item.username || '') : `${name}客运平台` }}</text>
          <text v-if="item.customerPhone && item.customerPhone !== item.username" class="text-28 color-t1 margin-left-20">{{ item.customerPhone }}</text>
        </view>
        <text v-else class="text-28 color-t1">包车需求</text>
        <l-tag :text="titleInfo.label" :type="titleInfo.type" border-width="0" plain />
      </view>
      <view class="padding-lr-30 padding-top-30">
        <view class="flex-row align-center justify-between">
          <text class="text-32 color-t1 text-bold">{{ dateFormat(item.startDate) }}</text>
          <text class="text-24 color-t3">{{ days }}天</text>
          <text class="text-32 color-t1 text-bold">{{ dateFormat(item.endDate) }}</text>
        </view>

        <view v-if="item.itinerary" class="margin-top-8 flex-column text-overflow-two text-center">
          <text class="text-28 color-t1 text-overflow-two text-center">{{ item.itinerary }}</text>
        </view>

        <view v-else-if="item.from && item.to" class="margin-top-8 flex-row align-center justify-between">
          <view class="flex-column flex-center place">
            <text class="text-24 color-t1 text-center text-overflow-two">{{ item.from }}</text>
          </view>
          <image class="arrow block" src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/icon/icon_arrow.png" />
          <view class="flex-column flex-center place">
            <text class="text-24 color-t1 text-center text-overflow-two">{{ item.to }}</text>
          </view>
        </view>

        <view v-if="type==='bill'" class="flex-row align-center margin-top-24">
          <view class="flex-column flex-item flex-center">
            <text class="text-24 color-t3">车费(元)</text>
            <text class="text-28 color-t1 text-bold margin-top-10">{{ item.realPrice.toFixed(2) }}</text>
          </view>
          <view class="flex-column flex-item flex-center">
            <text class="text-24 color-t3">平台佣金(元)</text>
            <text class="text-28 color-t1 text-bold margin-top-10">{{ item.platformFee }}</text>
          </view>
          <view class="flex-column flex-item flex-center">
            <text class="text-24 color-t3">结算金额(元)</text>
            <text class="text-28 color-t1 text-bold margin-top-10">{{ item.autoCompanyFee }}</text>
          </view>
        </view>

        <view v-else-if="type==='pending'" class="flex-row align-center justify-between margin-top-24">
          <text class="text-28 color-t1 text-bold margin-top-10">车费 : ￥{{ item.realPrice.toFixed(2) }}</text>
          <text class="text-28 color-primary">{{ item.status === 8 ? '已入账' : '未入账' }}</text>
        </view>

        <view v-else-if="type==='order'" class="flex-row justify-end align-center margin-top-24 money">
          <text class="text-28 color-t1 text-bold">车费: ¥{{ item.realPrice || item.originPrice +'('+(item.payTypeLabel||'暂无')+')' }}</text>
        </view>

        <template v-else>
          <view class="flex-row justify-between">
            <view class="flex-column margin-top-20">
              <text class="text-24 color-t3">车型</text>
              <text class="text-28 color-t1 margin-top-10">{{ item.autoType ? item.autoType : item.brand && item.seatAmount ? item.brand + item.seatAmount + '座' : '未填写' }}</text>
            </view>
            <view class="flex-column margin-top-20">
              <text class="text-24 color-t3">乘车人数</text>
              <text class="text-28 color-t1 margin-top-10">{{ item.passengers || '未填写' }}</text>
            </view>
            <view class="flex-column margin-top-20">
              <text class="text-24 color-t3">行程单</text>
              <image v-if="item.itineraryUrl" :src="item.itineraryUrl" class="card-image block margin-top-10" @click.stop="viewImage()" />
              <text v-else class="text-28 color-t1 margin-top-10">{{ '未上传' }}</text>
            </view>
          </view>
        </template>
      </view>
    </view>

    <view v-if="type==='bill' || type==='pending'" class="bottom flex-row flex-center" @click="toDetail">
      <text class="text-24 color-t1">订单详情</text>
      <image class="margin-left-10 block icon_arrow" src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/icon/icon_arrow_double.png" />
    </view>
    <view v-else-if="showButton" class="bottom order-bottom flex-row align-center justify-between padding-lr-30">
      <view v-if="type==='order'" class="flex-row align-center">
        <l-avatar size="66rpx" />
        <view class="flex-column margin-left-16">
          <text class="text-28 color-t1 text-bold">{{ item.driverName||'暂无' }}</text>
          <view class="margin-top-10">
            <text v-if="item.autoType" class="text-20 color-t3">{{ vehicle }}</text>
            <text v-else class="text-20 color-t3">{{ item.autoCompanyName }}（外调车辆）</text>
            <!--              <text v-if="orderType===0 && !item.vehicleId" class="text-20 color-t3">{{ item.autoCompanyName }}（外调车辆）</text>
            <text v-else class="text-20 color-t3">{{ vehicle }}</text>-->
          </view>
        </view>
      </view>
      <view v-else />

      <template v-if="type==='order'">
        <tui-button v-if="(item.status == 1 && item.payWay != 1) || item.status == 2" text="确认订单" width="144rpx" height="64rpx" border-radius="8rpx" :size="28" :shadow="false" @click="showModal('confirmOrder')" />
        <tui-button v-if="item.status === 4 && auth.includes('start_stroke')" text="开始行程" width="144rpx" height="64rpx" border-radius="8rpx" :size="28" :shadow="false" @click="startOrder" />
        <tui-button v-if="item.status === 6 && auth.includes('start_stroke')" text="结束行程" width="144rpx" height="64rpx" border-radius="8rpx" :size="28" :shadow="false" @click="showModal('finishOrder')" />
      </template>
      <tui-button v-else-if="item.status === 0 && auth.includes('hook_order')" text="确认接单" width="144rpx" height="64rpx" border-radius="8rpx" :size="28" :shadow="false" @click="goAdd" />
	  <view v-if="1==2" class="setTime">
	  	<span style="margin-right: 10rpx;display: inline-block;">待支付</span><span>剩余5:00</span>
	  </view>
    </view>
  </view>
</template>

<script>
import request from '@/common/api/request'
import { mapGetters } from 'vuex'
import { viewImage, jump, loading, toast, dateFormat } from '@/common/util'
import { orderTrackStart } from '@/common/api/order'
import { getStatus } from '@/order/index'
import { name } from '@/common/config'
export default {
  name: 'OrderCard',
  props: {
    type: { // order:订单  bill:账单  hook:获客需求  pending:挂账订单
      type: String,
      default: 'order'
    },
    item: {
      type: Object,
      default: () => {}
    },
    orderType: {
      type: Number,
      default: 0
    },
    marginTop: {
      type: String,
      default: '30rpx'
    }
  },
  data() {
    return {
      name
    }
  },
  computed: {
    dateFormat() {
      return (date) => {
        const arr = date.split(' ')
        arr[0] = dateFormat(arr[0], 'MM月DD日')
        arr[1] = arr[1].slice(0, 5)
        return arr.join(' ')
      }
    },
    vehicle() {
      if (this.item.autoType != null && this.item.autoType != '') {
        return this.item.autoBrand + '' + this.item.autoType + '(' + this.item.autoNumber + ')'
      } else {
        return this.item.autoBrand + '(' + this.item.autoNumber + ')'
      }
    },
    days() {
      const startDate = Date.parse(this.item.startDate.substring(0, this.item.startDate.indexOf(' ')))
      const endDate = Date.parse(this.item.endDate.substring(0, this.item.endDate.indexOf(' ')))
      const days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000) + 1
      return days
    },
    titleInfo() {
      const status = this.item.status
      if (this.type === 'hook') {
        const label = getStatus(status, true)
        switch (status) {
          case 0:
            return {
              label,
              type: 'primary',
              background: 'linear-gradient(to right, rgba(218, 166, 101, 0.1), rgba(218, 166, 101, 0))'
            }
          case 1:
            return {
              label,
              type: 'success',
              background: 'linear-gradient(to right, rgba(0, 194, 121, 0.1), rgba(0, 194, 121, 0))'
            }
          case 2:
            return {
              label,
              type: 'error',
              background: 'linear-gradient(to right, rgba(255, 77, 79, 0.1), rgba(255, 77, 79, 0))'
            }
          default:
            return {
              label,
              type: 'secondary',
              background: 'linear-gradient(to right, rgba(43, 48, 55, 0.1), rgba(43, 48, 55, 0))'
            }
        }
      } else {
        const label = getStatus(status)
        switch (status) {
          case 6:
            return {
              label,
              type: 'success',
              background: 'linear-gradient(to right, rgba(0, 194, 121, 0.1), rgba(0, 194, 121, 0))'
            }
          case 0:case 1:case 2:case 11 :
            return {
              label,
              type: 'error',
              background: 'linear-gradient(to right, rgba(255, 77, 79, 0.1), rgba(255, 77, 79, 0))'
            }
          case 4:
            return {
              label,
              type: 'primary',
              background: 'linear-gradient(to right, rgba(218, 166, 101, 0.1), rgba(218, 166, 101, 0))'
            }
          default:
            return {
              label,
              type: 'secondary',
              background: 'linear-gradient(to right, rgba(43, 48, 55, 0.1), rgba(43, 48, 55, 0))'
            }
        }
      }
    },
    showButton() {
      if (this.type === 'hook') {
        return this.item.status === 0 && this.auth.includes('hook_order')
      }
      return true
    },
    ...mapGetters({
      auth: 'auth'
    })
  },
  methods: {
    toDetail() {
		// 顺风车订单
		// if (this.type === '' && this.auth.includes('hook_order')) {
		//   jump('/order/order-detail/order-detail?orderId=' + this.item.id + '&type=hook')
		// }
      if (this.type === 'hook' && this.auth.includes('hook_order')) {
        jump('/order/order-detail/order-detail?orderId=' + this.item.id + '&type=hook')
      }
      if (this.type !== 'hook' && this.auth.includes('charter_order_details')) {
        jump('/order/order-detail/order-detail?orderId=' + (this.item.orderId || this.item.id) + '&type=order')
      }
    },
    viewImage() {
      viewImage(0, [this.item.itineraryUrl])
    },
    showModal(type) {
      const id = this.item.orderId || this.item.id
      const obj = {
        type,
        id
      }

      if (type === 'finishOrder') {
        obj.payWay = this.item.payWay
        obj.status = this.item.status
      }
      this.$emit('showModel', obj)
    },
    // 开始行程
    async startOrder() {
      const l = loading('加载中')
      const orderId = this.item.orderId || this.item.id
      const [err, res] = await orderTrackStart({ orderId })
      l.hide()
      if (!request.errorCheck(err, res)) return false
      toast('行程已开始')
      this.$parent.reloadList()
    },
    goAdd() {
      const id = this.item.orderId || this.item.id
      this.jump('/order/add-new/add-new?hookId=' + id)
    }
  }
}
</script>

<style scoped lang="scss">
@include setMargin(top,8);
.setTime{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: start;
	font-size: 28rpx;
	font-weight: 400;
	color: #F3C243;
}
.title{
  height:80rpx;
  border-radius:20rpx 20rpx 0 0;
}

.card{
  border-radius:20rpx !important;
}
.order{
  border:2rpx solid $color-border;
}
.bill,.pending{
  background:$color-background !important;
}
.place{
  width:218rpx;
  height:64rpx;
}
.arrow{
  width:52rpx;
  height:16rpx;
}
.bottom{
  height:82rpx;
  border-top:2rpx solid $color-border;
}
.icon_arrow{
  width:16rpx;
  height:16rpx;
}
.money{
  height:40rpx;
}
.order-bottom{
  height:132rpx;
}
.card-image{
  width:100rpx;
  height:100rpx;
  border-radius:8rpx;
}
</style>
